<template>
    <div class="cell1">
        <div class="cell2" v-for="item in products">
            <img  class="photo":src="item.img" height=300px>
                <div class="title1">
                    <span class="title2">
                        {{item.title}}
                    </span>
                </div>
                <div class="box">
                    <span class="symbol" >￥</span>
                    <span class="price">
                        {{item.price}}
                    </span>
                    <span class="people">
                        {{item.count}}人已购买
                    </span>
                </div>
        </div>
    </div>
</template>

<script>
  export default {
      	data(){
        return{
          products:[{
            img:'https://gw.alicdn.com/bao/uploaded/i4/420540980/O1CN01xo29YA1J6sil9Ei4B_!!420540980.jpg_500x500q90.jpg_.webp',
            title:"出口迪士尼尾单 米奇系列 卡通盘子碗碟迪士尼正品餐具餐盘碗",
            price:'25',
            count:'33'
          },{
            img:'https:////gw.alicdn.com/bao/uploaded/i1/665229603/O1CN01pJtyAT2KoE2KkAYxA_!!665229603-0-lubanu-s.jpg_500x500q90.jpg_.webp',
            title:"树可 日式和风榉木小汤勺长柄勺粥勺果酱勺蜂蜜勺木勺子拉面勺",
            price:'44',
            count:'252'
          },{
            img:'//gw.alicdn.com/bao/uploaded/i2/902952821/TB2.q8knXXXXXXpXXXXXXXXXXXX_!!902952821.jpg_500x500q90.jpg_.webp',
            title:"创意粗陶小花器景德镇陶瓷花瓶搭配日式茶道花插简约台面装饰摆件",
            price:'18.8',
            count:'92'
          },{
            img:'//gw.alicdn.com/bao/uploaded/i2/13503099/O1CN01Hqv0Uw1YlNu0OGYWy_!!0-item_pic.jpg_500x500q90.jpg_.webp',
            title:"美人鱼毯子鱼尾巴空调毯子沙发毯毛线针织午睡毯生日礼物创意礼物",
            price:'18',
            count:'66'
          },{
            img:'//gw.alicdn.com/bao/uploaded/i2/2672500623/O1CN01Loh2ij1GTNMHNohQP_!!2672500623-0-lubanu-s.jpg_500x500q90.jpg_.webp',
            title:"绿山墙安妮 Vintage优雅百搭郊游野餐防晒蕾丝三角披肩 送胸针",
            price:'138',
            count:'88'
          },{
            img:'//gw.alicdn.com/bao/uploaded/i2/167465838/TB2rihkggDD8KJjy0FdXXcjvXXa_!!167465838.jpg_500x500q90.jpg_.webp',
            title:"304不锈钢饭团模具宝宝diy做饭儿童球型卡通紫菜摇摇米饭蛋糕神器",
            price:'19.9',
            count:'12'
          },{
            img:'//gw.alicdn.com/bao/uploaded/i1/2115681332/TB22nboXirpK1RjSZFhXXXSdXXa_!!2115681332-0-item_pic.jpg_500x500q90.jpg_.webp',
            title:"围巾女秋冬季韩版百搭加厚学生ins可爱少女软妹保暖情侣毛线围脖",
            price:'19.8',
            count:'28'
          },{
            img:'//gw.alicdn.com/bao/uploaded/i1/3245104920/TB2fUSta0HO8KJjSZFtXXchfXXa_!!3245104920.jpg_500x500q90.jpg_.webp',
            title:"ins小方巾女韩国装饰领巾文艺仿真丝小丝巾春秋冬季百搭",
            price:'15',
            count:'62'
          }]
      }
    }
  }
</script>

<style scoped>
  .cell1{
      margin: auto;
      margin-top: -30px;
      width: 504px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      background-color: #f0f0f0;
  }

  .cell2{
    width: 243.504px;
    height: 370.24px;
    background-color: #FFFFFF;
    border-radius:5px;
    margin-top: 10px;
    margin-bottom: 8px
  }

  .photo{
    width: 243.504px;
    height: 243.504px;
    display: flex;
    border-radius:5px;
  }

  .title1{
    margin-top: 16.375999999999998px;
    height: 52.68800000000001px;
    position: relative;
    overflow: hidden;
    line-height: 26.344000000000005px;
    text-overflow: ellipsis;
    min-height: 0;
  }

  .box{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
    margin-top: 15.664000000000001px;
    height: 28.48px;
    line-height: 28.48px;
    padding: 8px
  } 

  .symbol{ 
    font-size: 15.664000000000001px;
    color: #ff5500;
    margin: 0;
    text-align:left;
  }

  .price{ font-size: 19.936px;
    line-height: 22.784000000000002px;
    color: #ff5500;
    text-align:left;
    margin-right: 70px;
  }

  .people{
    font-size: 15.664000000000001px;
    color: #999999;
    margin-top: 2.8480000000000003px;
  }

  .title2{
    font-size: 15px;
    color: #333333;
  }
</style>